<template>
    <div clsss="update-password" style="background-color: #F5F5F5;">
  
        <wxc-minibar title="设置交易密码" >
            <!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image> -->
        </wxc-minibar>

        <div class="form">
            <div class="form_fl">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">新交易密码</text>
            </div>
            <div class="form_fr">
                <input style="font-size: 28px;color: #A7A7A7;" type="password" class="input" v-model="password" maxlength="6" minlength="6"  placeholder="请输入6位数字交易密码">
            </div>
        </div>
        <div class="form">
            <div class="form_fl">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">确认交易密码</text>
            </div>
            <div class="form_fr">
                <input style="font-size: 28px;color: #A7A7A7;" type="password" class="input" v-model="passwordconfirm" maxlength="6" minlength="6" placeholder="请再次输入新密码">
            </div>
        </div>
        <div class="button_box">
           <div class="button" @click="submitpassword">
             <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #FFFFFF;">完成</text>
           </div>
        </div>
        <wxc-mask :show="alertCode" width="320" height="80" mask-bg-color="#333" :has-overlay="false"> 
			<div class="tip"><text class="tip-font">{{ content }}</text></div>
		</wxc-mask>
    </div>

</template>

<script>
import { postResponsesToken } from '@/api.js'
import { WxcMask} from 'weex-ui'
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { debug } from 'util';
import { getBaseUrl }  from "@/utils/index.js"
var sxglobalEvent = weex.requireModule('globalEvent');
let navigator = weex.requireModule('navigator')
const modal = weex.requireModule('modal')

  export default {
    data(){
        return {
          type:2,
          alertCode:false,
          content:'',
          password:'',
          passwordconfirm:'',
          accountId:'',
          phoneNumber:'',
          baseURL:''
        }
    },
    components:{
      WxcMask,
      WxcMinibar
    },
    created () {
        this.getItem('personalDetails').then( (value) => {
            this.cacheDate = JSON.parse(value)

            let { mobile } = this.cacheDate

            this.phoneNumber = mobile

        })

        this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
    },

    methods: {
        // 获取缓存指定数据
		getItem (name) {
			return new Promise((resolve, reject)=>{
				storage.getItem(name, event => {
					if (event.result === "success") {
						resolve(event.data);
					} else {
						reject('获取定位失败')
					}
				})
			})
        },
        
        alert(title, msg) {
            this.alertCode = true
            this.content= title
            if(this.close) return ;
            this.close = true
            setTimeout(()=>{
                this.alertCode = false
                this.close = false
            },2000)
        },

        async submitpassword(){
            if( !/^\d+$/.test(this.password) || !/^\d+$/.test(this.passwordconfirm)) {
                    this.alert('请输入6位数字密码')
                    return false
            }
            if(this.password===''){
                this.alert('请输入密码')
                return false
            }
            if(this.passwordconfirm===''){
                this.alert('请输入确认密码')
                return false
            }
            if(this.password != this.passwordconfirm){
                this.alert('输入的密码不一致')
                return false
            }

            let param={
                newPayPassword: this.password,
                type: 2
            }
            
            let data = await postResponsesToken('account/user/updatePayPassword', param)

            if(data.code === 0) {
                navigator.push({
                    'url': this.baseURL + 'index.js?index=3',
                    'animated': 'true'
                })
            } else {
                modal.toast({message: error})
            }
        }
    }
  };
</script>
<style scoped>
   .update-password{
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #F5F5F5;
    }
    .header {
        width: 750px;
        height: 90px;
        background-color: #fff;
        box-shadow: 0 4px 15px 0 rgba(229,229,229,0.50);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .header-img {
        position: absolute;
        left: 32px;
        top: 34px;
        margin-left: 0;
    }

    .header-title {
        font-size: 34px;
        color: #fff;
        font-family: PingFangSC-Medium;
    }
    .header-img-right {
        position: absolute;
        right: 32px;
        top: 34px;
        margin-left: 0;
    }
    .form{
        height: 112px;
        background-color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
           border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #f5f5f5;
    }
    .form_fl{
      width: 300px;
      padding-left: 32px;
    }
    .form_fr{
       width: 386px;
         padding-right: 32px;
    }
    .button_box{
        margin-top: 80px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .input{
        height:150px;
        text-align: right;
    }
    .button{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 96px;
        background-color: #E70D0D;
        border-radius: 4px;
    }
    .tip {
        width:320px;
        height: 80px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .tip-font {
        color:#fff;
        font-size:28px;
    }
</style>